<template xmlns="">
  <div class="test-form">
    <flowable-s-v-g :elements="elements" :flows="flows" :diagramWidth="diagramWidth" :diagramHeight="diagramHeight"
                    :diagram-begin-x="flowChart.diagramBeginX" :diagram-begin-y="flowChart.diagramBeginY"/>
    <div>
      <img
          src="http://127.0.0.1:9005/flowable/app/processDiagram?processDefinitionId=sdhjkashdkaweq:1:de17541c-596d-11eb-89e9-acde48001122"
          style="position: relative;border: yellowgreen 1px solid" alt="">
      <el-popover
          placement="top-start"
          :title="v.name"
          width="200"
          trigger="hover"
          v-for="(v,i) in locationInformation" :key="i">
        <div>
          sdfdsfds
        </div>
        <el-button slot="reference" class="test"
                   :style="{top:v.y+'px',left:v.x+'px',width:v.width+'px',height:v.height+'px'}"></el-button>
      </el-popover>
    </div>
    <vue-bpmn
        url="http://localhost:3000/Accessories.bpmn20.xml"
        v-on:error="handleError"
        v-on:shown="handleShown"
        v-on:loading="handleLoading"
    ></vue-bpmn>
  </div>
</template>

<script>

// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'
import service from "@/api/service";
import VueBpmn from 'vue-bpmn';
import FlowableSVG from "@/components/flowChart";

export default {
  components: {
    VueBpmn, FlowableSVG
  },
  data() {
    return {
      locationInformation: [],
      xml: null,
      elements: [],
      flows: [],
      diagramHeight: 0,
      diagramWidth: 0,
      flowChart: {},
      nodeData:[]
    }
  },
  created() {
    service.get('/flowable/process/definition/modeler/77b00ff9-574c-11eb-84d8-eea0081f6503/bpmn20')
        .then(res => {
          this.xml = res.data
        })
    // service.get('/flowable/flowChart/rest/process-instances/model-json', {processInstanceId: 'f5ca8f69-59a9-11eb-a1f5-acde48001122'}).then(res => {
    service.get('/flowable/app/rest/models/77b00ff9-574c-11eb-84d8-eea0081f6503/model-json?nocaching=1611121207603', ).then(res => {
      this.elements = res.elements
      this.flows = res.flows
      this.diagramWidth = res.diagramWidth
      this.diagramHeight = res.diagramHeight
      this.flowChart = res

    })
    service.get('/flowable/flowChart/get-node-information',{processInstanceId: 'f5ca8f69-59a9-11eb-a1f5-acde48001122'}).then(res => {

    })
  },
  mounted() {
    service.get('/flowable/app/processDiagram', {processDefinitionId: 'sdhjkashdkaweq:1:de17541c-596d-11eb-89e9-acde48001122'}).then(res => {
      this.locationInformation = res.data
    })
  },
  methods: {
    handleError: function (err) {
      console.error('failed to show diagram', err);
    },
    handleShown: function () {
      console.log('diagram shown');
    },
    handleLoading: function () {
      console.log('diagram loading');
    }
  }
}
</script>

<style scoped>

.test {
  opacity: 0;
  position: absolute;
}
</style>
